﻿@charset "utf-8";

/* 设置字库 */
@font-face {
  font-family: 'SourceHanSansCNRegular';
  src: url('../fonts/SourceHanSansCN-Regular.ttf');
}
@font-face {
  font-family: 'DINmedi';
  src: url('../fonts/DIN Medium.ttf');
}
@font-face {
  font-family: 'PingFang';
  src: url('../fonts/PingFangMedium.ttf');
}
/*@font-face {
  font-family: 'SourceHanSerifCNLight';
  src: url('../fonts/SourceHanSerifCN-Light.otf');
}*/

/*body{font-family:'SourceHanSerifCNLight';}*/


.colorJb{ 
  background: linear-gradient(to top, #2cc4fc, #35f2f4);
  -webkit-background-clip: text;
  color: transparent;
}
.Repeat{ background-size: cover!important; background-repeat: no-repeat !important;}


/* banner */
.Banner{ overflow: hidden;}
.Banner_txt{ position: relative;}
.Banner .leftBox{ font-size: 20px; color:rgba(255, 255, 255, .6); line-height: 40px; position: absolute; left: 0; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
.Banner .leftBox a{ border-radius: 30px; font-size: 24px; font-family: 'SourceHanSansCNRegular'; display: inline-block; color: #000; padding:10px 30px; background: linear-gradient(#35f2f4, #2cc4fc); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
.Banner .leftBox h5{ margin:40px 0; font-size: 60px; line-height: 60px; font-family: 'SourceHanSansCNRegular'; }
.Banner .leftBox::after{ content:""; display: block; width:30px; height: 2px; background: linear-gradient(#35f2f4, #2cc4fc); }
.Banner .leftBox p{ min-height: 160px;}
.Banner .rightBox{float: right;width:51.389%;}
.Banner .rightBox img{ max-width: 100%;}
@media (max-width:1024px){
.Banner .leftBox h5{ line-height: 45px; font-size:40px;}
}
@media (max-width:640px){
.Banner .rightBox{ height:70vh; line-height:70vh;}
.Banner .rightBox img{vertical-align: middle;}
.Banner .leftBox a{ padding:0px 20px; font-size: 18px;}
.Banner .leftBox h5{ margin: 5px 0; line-height:35px; font-size:24px;}
.Banner .leftBox p{ padding-bottom: 10px; line-height: 25px; font-size: 16px; margin: 0; min-height: 0;}
}

/* 第一屏 */
.Screen{overflow: hidden;}
.Screen .tiw_wz{ font-weight: 600; font-family: 'SourceHanSerifCNLight'; padding: 105px 0 60px; line-height: 60px; text-align: center; font-size: 60px;}
.Screen .Tim{ line-height: 35px; margin-bottom: 70px; color:#fff; text-align: center; font-size: 30px; font-family: 'SourceHanSansCNRegular';}
.Screen .tit{font-family: "syrh-b";;background: linear-gradient(to top, #2cc4fc, #35f2f4);-webkit-background-clip: text;color: transparent;font-weight: bold;}
.Screen01 .list{ padding-bottom:54px;}
.Screen01 .list .pic{ float: left; width:50%; text-align: center;}
.Screen01 .list .pic .img{ background: url(../images/line_back1.png) no-repeat center bottom; background-size: contain; padding-bottom: 2px; width:83%; margin: 0 auto;}
.Screen01 .list .text{ width: 83%; margin: 0 auto; padding: 35px 0; font-size: 18px; color: #fff;}
.Screen .slick-prev,
.Screen .slick-next{ z-index: 9; opacity: .3; border:none; cursor: pointer; width: 70px; height: 70px; font-size:0; position: absolute; top:45%; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; }
.Screen .slick-prev{ background: url(../images/left_icon1.png) no-repeat center; left:-70px;}
.Screen .slick-next{ background: url(../images/left_icon2.png) no-repeat center; right:-70px;}
.Screen .slick-prev:hover,
.Screen .slick-next:hover{ opacity: 1;}
@media (max-width:640px){
.Screen01 .Tim{ font-size: 18px; margin-bottom:20px;}
.Screen01 .list .pic .img{ width: 96%;}
.Screen01 .list .text{ font-size: 14px; width: 96%; padding: 10px 0;}
}
/* 第二屏 */
.Screen02 .Miaosu{ max-width: 895px; margin: 0 auto; margin-bottom: 50px; font-size: 18px; color: rgba(255, 255, 255, .8); text-align: center; font-family: 'SourceHanSansCNRegular'; line-height: 35px;}
.Screen02 .list{ padding-bottom: 80px;}
.Screen02 .list .shell{ margin:0 35px;}
.Screen02 .list .pic img{ width: auto; max-width: 100%;}
.Screen02 .list .wenb{ margin-top: 10px; line-height: 25px; background: url(../images/Screen02_back.png) repeat-x; background-size: contain; padding: 30px 0 0; min-height: 133px; text-align: center; font-family: 'SourceHanSerifCNLight';}
.Screen02 .list .wenb h6{ color: #fff; margin: 0; font-size: 18px;}
.Screen02 .list .wenb p{ color: rgba(255, 255, 255, .5); font-size: 14px; margin: 0 auto;}
.Screen02 .slick-prev,
.Screen02 .slick-next{ top: 30%;}
.Screen02 .slick-dots{ text-align: center; padding: 0; margin: 0; list-style: none; margin-top:20px;}
.Screen02 .slick-dots li{ cursor: pointer; margin: 0 10px; font-size: 0; text-align: center; display: inline-block; vertical-align: middle;}
.Screen02 .slick-dots li button{ cursor: pointer; font-size:0; width: 26px; height: 26px; background: url(../images/point_1.png) no-repeat center; border:none; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.Screen02 .slick-dots .slick-active button{ background: url(../images/point_2.png) no-repeat center;}
@media (max-width:1024px){
.Screen .tiw_wz{ font-size: 45px; padding: 80px 0 30px;}
.Screen .slick-prev,
.Screen .slick-next{ width: 50px; height: 50px; background-size: contain !important;}
.Screen .slick-prev{ left: 0;}
.Screen .slick-next{ right: 0;}
.Screen02 .list .shell{ margin: 0 10px;}
.Screen02 .list .wenb{ padding-top: 20px; min-height: 100px;}
.Screen02 .slick-prev,
.Screen02 .slick-next{ top: 20%;}
}
@media (max-width:640px){
.Screen .tiw_wz{ font-size:32px; padding: 40px 0 10px;}
.Screen .slick-prev,
.Screen .slick-next{ opacity:.7; width: 30px; height: 30px; background-size: contain !important;}
.Screen02 .Miaosu{ margin-bottom:20px; font-size: 14px; line-height: 25px;}
.Screen02 .list .wenb{ margin-top: 0; padding-top: 10px;}
.Screen02 .list .wenb h6{ font-size: 15px;}
.Screen02 .list .wenb p{ padding: 0 5px; font-size: 12px;}
.Screen02 .list{ padding-bottom:50px;}
.Screen02 .slick-prev,
.Screen02 .slick-next{ top: 15%;}
.Screen02 .slick-dots{ margin-top: 5px;}
.Screen02 .slick-dots li{ margin: 0 2px;}
.Screen02 .slick-dots li button{ background-size: contain !important; width: 20px; height: 20px;}
}

/* 第三屏 */
.Screen03 .Tab-a{font-family: 'SourceHanSerifCNLight'; text-align: center; color: rgba(255, 255, 255, .3); font-size: 0;}
.Screen03 .Tab-a span{ cursor: pointer; margin-left:-1px; min-width: 160px; font-size: 16px; padding:18px 0; display: inline-block; background: url(../images/line_1.png) no-repeat center; background-size: contain !important;}
.Screen03 .Tab-a span:hover,
.Screen03 .Tab-a span.on{ color: #fff; background: url(../images/line_2.png) no-repeat center;}
.Screen03 .Tab-b{ padding-bottom:80px; margin-top: 50px;}
.Screen03 .Tab-b .Conw{ display: none; font-family: 'SourceHanSerifCNLight'; font-size: 16px; text-align: center;}
.Screen03 .Tab-b .Conw img{ max-width: 100%;}
.Screen03 .Tab-b .weniz{ color: #fff; line-height: 25px;}
.Screen03 .Tab-b .Tishi{ position: relative; line-height: 30px; font-size: 16px; color: #fff; text-align: center; background: rgba(255, 255, 255, .1); padding: 40px 0;}
.Screen03 .Tab-b .Tishi h4{ margin: 0 auto;}
.Screen03 .Tab-b .Tishi::after{ display: inline-block; width: 28px; height: 10px; background: url(../images/icon_sl.png) no-repeat center; content: ''; position: absolute; left: 50%; top:-10px; margin-left: -14px;}
@media (max-width:640px){
.Screen .Tim{ margin-bottom:30px;}
.Screen03 .Tab-a span{ font-size: 14px; padding:7px 0; min-width: 0; width: 33.333%;}
}

/* 第四屏 */
.Screen04 .tiw_wz{ padding-bottom: 95px;}
.Screen04 .Neiwe{ padding-bottom: 150px;}
.Screen04 .Neiwe .Tlo{ min-height: 100px; text-align: center; font-size: 20px; color: #fff; line-height: 35px;}
.Screen04 .Neiwe .Tlo .diuuw{  max-width: 470px; text-align:left; padding-left:105px; position: relative; display: inline-block; vertical-align: middle;}
.Screen04 .Neiwe .Tlo .diuuw .wia{ position: absolute; left:0;}
.Screen04 .Neiwe .Tlo .diuuw2{ padding-left: 0 !important;}
.Screen04 .Neiwe li{ float: left; width:48%;}
.Screen04 .Neiwe li:nth-child(2){ float: right;}
.Screen04 .Neiwe li img{ max-width: 100%;margin-bottom: 10px;}
.Screen04 .Neiwe li .shelw{ width:48%; float: left;}
.Screen04 .Neiwe li .shelw:nth-child(2){ float: right;}
.Screen04 .Neiwe li .shelw .tit{font-size: 16px;color: #fff;text-align: center;}
.Screen04 .Neiwe li .wenb{ border: solid 1px #16484d; border-top: none; background: rgba(255, 255, 255, .1); text-align: center; min-height: 137px; padding:20px 0; color: rgba(255, 255, 255, .6); font-size: 14px;}
.Screen04 .Neiwe li .tyex{ max-width: 85%; display: inline-block; vertical-align: middle; text-align: left;}
.Screen04 .Neiwe li .Tlo .dl{font-size: 14px;padding-top: 20px;text-align: center;display: inline-block;max-width: 80%;}
.Screen04 .Neiwe li .Tlo .dl dt{float: left;}
.Screen04 .Neiwe li .Tlo .dl dd{float: left;text-align: left;}
@media (max-width:1024px){
.Screen04 .tiw_wz{ padding-bottom:10px;}
.Screen04 .Neiwe{ padding-bottom:80px;}
.Screen04 .Neiwe .Tlo{ min-height: 0; padding:20px 0;}
.Screen04 .Neiwe li{ width:100%;}
.Screen04 .Neiwe li .pic{ background-color: #000; text-align: center;}
.Screen04 .Neiwe li .shelw{ width:48%; float: left;}
}
@media (max-width:640px){
.Screen04 .Neiwe .Tlo{ font-size: 16px;}
.Screen04 .Neiwe .Tlo .diuuw{ padding-left: 83px;}
.Screen04 .Neiwe li .wenb{ padding:5px; min-height: 100px;}
.Screen04 .Neiwe li .tyex{ max-width: 90%; font-size: 12px;}
}

/* 第五屏 */
.Screen05 .tiw_wz{ padding-bottom: 95px;}
.Screen05 .list{ position: relative; padding-bottom: 100px;}
.Screen05 li .pic{ background-color: #000; margin:0 42px; opacity: .3;}
.Screen05 li.slick-center .pic{ opacity: 1;}
.Screen05 li img{ max-width: 100%; width: auto;margin: auto;}
.Screen05 .slick-dots{ text-align: center; padding: 0; margin: 0; list-style: none; margin-top:50px;}
.Screen05 .slick-dots li{ cursor: pointer; margin: 0 10px; font-size: 0; text-align: center; display: inline-block; vertical-align: middle;}
.Screen05 .slick-dots li button{ cursor: pointer; font-size:0; width: 26px; height: 26px; background: url(../images/point_1.png) no-repeat center; border:none; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.Screen05 .slick-dots .slick-active button{ background: url(../images/point_2.png) no-repeat center;}
.Screen05 .slick-prev,
.Screen05 .slick-next{ display: none; }
.Screen05 .w1440{ width:100%; position: absolute; z-index: 9; left: 50%; top:33%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.Screen05 .but-prev,
.Screen05 .but-next{ opacity: .3; border:none; cursor: pointer; width: 70px; height: 70px; font-size:0; position: absolute; top:45%; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; }
.Screen05 .but-prev{ background: url(../images/left_icon1.png) no-repeat center; left:-70px;}
.Screen05 .but-next{ background: url(../images/left_icon2.png) no-repeat center; right:-70px;}
.Screen05 .but-prev:hover,
.Screen05 .but-next:hover{ opacity: 1;}
@media (max-width:1024px){
.Screen05 .tiw_wz{ padding-bottom: 30px;}
.Screen05 li .pic{ margin: 0 20px;}
.Screen05 .w1440{ top:25%;}
.Screen05 .but-prev,
.Screen05 .but-next{ width: 50px; height: 50px; background-size: contain !important;}
.Screen05 .but-prev{ left:2%;}
.Screen05 .but-next{ right:2%;}
.Screen05 .slick-prev,
.Screen05 .slick-next{ display: none !important; }
}
@media (max-width:640px){
.Screen05 .w1440{ top:35%;}
.Screen05 .list{ padding-bottom:30px;}
.Screen05 .but-prev,
.Screen05 .but-next{ opacity:.7; width: 30px; height: 30px; background-size: contain !important;}
.Screen05 li .pic{ margin: 0 5px;}
.Screen05 li.slick-active .pic{ opacity: 1;}
.Screen05 .slick-dots{ margin-top: 20px;}
.Screen05 .slick-dots .slick-active button{ width: 20px; height: 20px; background-size: contain !important;}
.Screen05 .slick-dots li{ margin:0 5px;}
}







